<template>
  <div class="gong_display">
    <div class="gong_tit">{{tian}}宫</div>
    <div class="content">
      <div class="shensha">
        <div style="color: black;font-weight: 500;">神煞:</div>
        <div class="ssw">
          <div v-for="(ss, iss) in shenSha" class="ssi">{{ ss }}
          </div>

        </div>
      </div>
      <div class="shenzhiname">
        <div style="color: black;font-weight: 500;">十二神:</div>
        <span v-for="(s, is) in shiErShen" class="srsi">
          <span style="color: var(--cart_bg_color);">{{ s.tit + ': ' }}</span>
          <span>{{ s.content }}</span>
        </span>
      </div>
      <div class="shenpan">
        <div style="color: black;font-weight: 500;">神盘:</div>
        <div v-for="(s, is) in shenPan" class="srsi">

          <Highlight highlight-class="custom-class" class="zz_item" :keywords="keywords" :source-string="s" />
        </div>
      </div>
      <div class="shenpan">
        <div style="color: black;font-weight: 500;">天盘:</div>
        <div v-for="(s, is) in tianPan" class="srsi">
          <Highlight highlight-class="custom-class" class="zz_item" :keywords="keywords" :source-string="s" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from 'vant/lib/utils';
import { getXiangYi } from '../../api/fzzl/xiangyi';
import { shenZhiKeYing } from '../../api/paipan';
import { Highlight } from 'vant';

export default {
  name: "Test",
  components: {
    Highlight,
  },
  data() {
    return {
      ssList: null,
      shiErShen: [],
      shenPan: [],
      tianPan: [],
      keywords: [
        "描述：",
        "概念：",
        "地理：",
        "动物：",
        "静物：",
        "人物：",
        "性情：",
        "人体：",
        "动物：",
        "植物：",
        "颜色：",
        "行人：",
        "争讼：",
        "兵战：",
        "乘贵",
        "乘蛇",
        "乘雀",
        "乘合",
        "乘勾",
        "乘龙",
        "乘空",
        "乘虎",
        "乘常",
        "乘玄",
        "乘阴",
        "乘后",
      ],
    };
  },
  created() {
    console.log(this.shenSha);
    this.getShenZhiName()
  },

  props: {
    shenSha: {
      type: Array,
      required: true, // 必传参
    },
    tian: {
      // 允许的类型：字符串或数组
      type: String,
      required: true, // 必传参数
    },
    di: {
      // 允许的类型：字符串或数组
      type: String,
      required: true, // 必传参数
    },
    shen: {
      // 允许的类型：字符串或数组
      type: String,
      required: true, // 必传参数
    }
  },
  methods: {
    r() {
      location.reload();
    },
    getShenZhiName() {
      this.shiErShen = [...[]]
      let szky = shenZhiKeYing(this.shen, this.tian)
      let szo = szky.split(':')
      this.shiErShen.push({
        tit: szo[0], content: szo[1]
      })
      let szky1 = shenZhiKeYing(this.shen, this.di)
      let szo1 = szky1.split(':')
      this.shiErShen.push({
        tit: szo1[0], content: szo1[1]
      })
      this.shenPan = [...[]]
      this.shenPan = this.splitByNewline(getXiangYi(this.shen))
      this.tianPan = [...[]]
      this.tianPan = this.splitByNewline(getXiangYi(this.tian))
    },
    splitByNewline(str, filterEmpty = false) {
      // 处理空字符串：直接返回空数组
      if (typeof str !== 'string') {
        throw new Error('参数必须是字符串');
      }
      if (str === '') {
        return [];
      }

      // 正则匹配所有换行符：\r\n（Windows）、\n（Unix）、\r（旧Mac）
      const newlineRegex = /\r?\n|\r/g;

      // 分割字符串
      let result = str.split(newlineRegex);

      // 可选：过滤空元素（例如连续换行产生的空字符串）
      if (filterEmpty) {
        result = result.filter(item => item.trim() !== '');
      }

      return result;
    }
  },
  watch: {
    shen(o, n) {
      this.getShenZhiName()
    }
  }
};
</script>

<style lang="scss" scoped>
.gong_display {
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 4rem;
  height: 60vh;
  width: 90vw;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;


  .gong_tit {
    height: 34rem;
    font-size: 18px;
    font-weight: 600;
    color: white;
    line-height: 34rem;
    background-color: var(--cart_bg_color);
    width: 90vw;
    text-align: center;
  }

  .content {
    overflow: scroll;
    height: calc(60vh - 34rem - 2vw);
    max-height: calc(60vh - 34rem - 2vw);
    width: 86vw;
    display: flex;
    flex-direction: column;
    align-items: center;

    .shensha {
      min-width: 86vw;
      margin-top: 10rem;
      display: flex;
      flex-direction: column;
      font-size: 15px;

      .ssw {
       margin-top: 10rem;
        display: flex;
        flex-wrap: wrap;

        .ssi {
          color: #002c1c;
          color: var(--cart_bg_color);
          line-height: 22px;
          margin-right: 5rem;

        }
      }

    }

    .shenzhiname {
      line-height: 20rem;
      margin-top: 20px;
      font-size: 15px;
      display: flex;
      flex-wrap: wrap;

      .srsi {
        margin-top: 10px;
        color: #002c1c;

      }
    }

    .shenpan {
      line-height: 20rem;
      margin-top: 20px;
      font-size: 15px;
      display: flex;
      flex-direction: column;

      .srsi {
        margin-top: 10px;
        color: #002c1c;

      }
    }
  }
}
</style>
